<template>
  <div>
    <van-button @click="get_fund()">固定收益</van-button>
    <van-button @click="get_fund2()">实时基金</van-button>
    <van-button @click="get_fund3()">按天收益</van-button>
    <el-table
        :data="customerlist.data"
        stripe
        style="width: 100%;height:100%">
      <el-table-column
          prop="name"
          label="名称">
      </el-table-column>
      <el-table-column
          prop="model"
          label="型号"
      >
      </el-table-column>
      <el-table-column
          prop="stating_amount"
          label="起步资金"
      >
      </el-table-column>
      <el-table-column
          prop="interest_rate"
          label="利率">
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="time_state"-->
<!--          label="时间">-->
<!--      </el-table-column>-->
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <!--        <el-button type="text" size="small" @click="handleClick(scope.row.id)"-->
          <!--        >通过</el-button-->
          <!--        >-->
          <!--        <el-button type="text" size="small" @click="refuse(scope.row.id)">拒绝</el-button>-->
          <el-button type="text" size="small" @click="Order_details(scope.row.id,scope.row.time_state)">购买</el-button>
          <p v-if="scope.row.time_state==3"><el-button type="text" size="small" @click="Order_djns(scope.row.id,scope.row.name)">查看详情</el-button></p>
        </template>
      </el-table-column>
    </el-table>
    <van-popup v-model:show="show" style="width: 300px; height: 70%" closeable close-icon="close">
      <div style="height: 20%"></div>
      <van-field label="输入金额" v-model="price"></van-field>
      <van-field label="输入购买天数" v-model="day"></van-field>
      <van-field label="输入支付密码" v-model="password" type="password"></van-field>
      <van-radio-group v-model="radio" direction="horizontal" v-if="this.time_state==1">
        是否续费:
        <van-radio name="1">是</van-radio>
        <van-radio name="2">否</van-radio>
      </van-radio-group>
      <center>
        <van-button @click="esc">取消</van-button>
        <van-button @click="queding">确定</van-button>
      </center>
    </van-popup>
<!--    <van-popup v-model:show="show_num" style="width:  100%; height: 100%" closeable close-icon="close">-->
<!--      <div id="main" style="width:  100%; height: 100%"></div>-->
<!--    </van-popup>-->
    <div id="main" style="width:  100%; height:200px"></div>
  </div>
</template>

<script>
import {reactive} from "@vue/reactivity";
import * as echarts from 'echarts';
export default {
  setup(){
    let customerlist = reactive({'data':[]})
    console.log(customerlist)
    var socket = new WebSocket("ws:127.0.0.1:8000/web/");

    socket.onopen = function () {
      console.log('成功');//成功连接上Websocket

    };
    socket.onmessage = function (e) {
      customerlist.data=JSON.parse(e.data)
      console.log(customerlist.data)
      // 获取数据
      // alert('消息提醒: ' + e.data);//打印服务端返回的数据
    };
    socket.onclose = function () {
      console.log('关闭连接');
      socket.close(); //关闭TCP连接
    };
    //连接发生错误的回调方法
    socket.onerror = function () {
      console.log("WebSocket连接发生错误");
    }

    return{
      customerlist,
      socket
    }
  },
  name: "bank_fund",
  data() {
    return {
      list: [],
      show: false,
      price: '',
      day: '',
      password: '',
      userid: localStorage.getItem('usrid'),
      num_id: '',
      radio: '1',
      nuid:'1',
      time_state:'',
      show_num:false,
      echart_name:'',
      echart_id:'',
      date_list:[],
      interest_list:[]
    }
  },
  methods: {
    Order_djns(id,echart_name){
      this.show_num=true
      // this.echart_name=echart_name
      // this.echart_id=id
      console.log(id)
      this.myaxios('http://localhost:8000/get_eachart/', 'get', {
        'echart_id': id,
        'echart_name': echart_name,
      })
          .then(res => {
            console.log(res)
            this.date_list=res.date_list
            this.interest_list=res.interest_list
            this.get_eachar()
          })

    },
    get_eachar(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.date_list
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.interest_list,
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);

    },
    esc(){
      this.show=false
    },
    get_fund(){
      this.nuid='1'
      this.get_role()
    }, get_fund2(){
      this.nuid='2'
      this.get_role()
    }, get_fund3(){
      this.nuid='3'
      this.get_role()
    },
    queding() {
      if (this.nuid==3){
        this.myaxios('http://localhost:8000/thina_fund/', 'post', {
          'userid': this.userid,
          'price': this.price,
          'days': this.day,
          'password': this.password,
          'num_id': this.num_id,
        })
            .then(res => {
              console.log(res)
              if (res.code == 200) {
                this.show = false
              }
            })
      }else {
        this.myaxios('http://localhost:5000/add_fund', 'get', {
          'userid': this.userid,
          'price': this.price,
          'day': this.day,
          'password': this.password,
          'num_id': this.num_id,
          'status': this.radio,
        })
            .then(res => {
              console.log(res)
              if (res.code == 200) {
                this.show = false
              }
            })
      }

    },
    Order_details(id,time_state) {
      console.log(id)
      console.log(time_state)
      this.num_id = id
      this.time_state = time_state
      this.show = true
    },
    get_role() {
      this.myaxios('http://localhost:8000/get_bank_fund/', 'post', {'nuid':this.nuid})
          .then(res => {
            // this.list = res.list
            if (this.customerlist.data){
              this.customerlist.data=res.list
            }
          console.log(this.customerlist.data)
          })
    },
  },
  mounted() {
    this.get_role()
  }
}
</script>

<style scoped>

</style>
